<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sq="http://www.w3.org/1999/html">
<head>
  <th:block th:include="include :: header"/>
  <link th:href="@{/assets/css/plugins/toastr/toastr.min.css}" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5 th:text="个人中心"></h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <form class="form-horizontal m-t" id="editFrom" method="post">
            <div class="form-group">
              <label class="col-sm-3 control-label">账号：</label>
              <div class="col-sm-8">
                <input type="hidden" id="id" name="id" th:value="${user.id}">
                <input id="username" name="username" minlength="2" th:disabled="${user.id}" th:value="${user.username}"
                       type="text" maxlength="50" class="form-control" required="" aria-required="true">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">用户名：</label>
              <div class="col-sm-8">
                <input id="surname" name="surname" minlength="1" th:value="${user.surname}" type="text"
                       th:disabled="${user.id}"
                       maxlength="50" class="form-control" required="" aria-required="true">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">上次登陆时间：</label>
              <div class="col-sm-8">
                <input id="loginTime" name="loginTime" minlength="1"
                       th:value="${#dates.format(user.loginTime,'yyyy-MM-dd HH:mm:ss')}" type="text"
                       th:disabled="${user.id}"
                       maxlength="50" class="form-control" required="" aria-required="true">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">上次登陆IP：</label>
              <div class="col-sm-8">
                <input id="loginIp" name="loginIp" minlength="1" th:value="${user.loginIp}" type="text"
                       th:disabled="${user.id}"
                       maxlength="50" class="form-control" required="" aria-required="true">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-4 col-sm-offset-3">
                <button class="btn btn-primary" type="button" onclick="openWindow()">
                  修改密码
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改密码</h4>
      </div>
      <div class="modal-body" style="padding-top:0px;padding-bottom:0px;">
        <form class="form-horizontal m-t" id="passWordFrom" method="post">
          <div class="form-group">
            <input type="password" class="form-control" name="oldPassword" id="oldPassword" placeholder="请输入旧密码"
                   required>
          </div>
          <div class="form-group">
            <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码"/>
          </div>
          <div class="form-group">
            <input type="password" class="form-control" name="newPasswords" id="newPasswords" placeholder="请确认新密码">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary block full-width m-b">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/assets/js/plugins/toastr/toastr.min.js}"></script>
<script th:src="@{/assets/js/plugins/md5/md5.js}"></script>

<script th:inline="javascript">
    const requestPath = parent.api.sys.user
    $(function () {
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "progressBar": true,
            "positionClass": "toast-top-center",
            "onclick": null,
            "showDuration": "400",
            "hideDuration": "1000",
            "timeOut": "2000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
    });

    //打开模态框
    function openWindow() {
        $("#oldPassword").val("");
        $("#newPassword").val("");
        $("#newPasswords").val("");
        $("#myModal").modal();
    }

    //关闭模态框
    function closeWindow() {
        $("#myModal").modal('hide')
    }

    let icon = "<i class='fa fa-times-circle'></i> ";
    // 邮政编码验证
    jQuery.validator.addMethod("isComplexity", function (value, element) {
        let regx = /^(?=.*[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、])(?=.*\d)(?=.*[a-zA-Z]).{8,15}$/;
        return this.optional(element) || (regx.test(value));
    }, icon+"必须包含字母、特殊符号和数字的组合，长度在8-15之间");
    $().ready(function () {
        $("#passWordFrom").validate({
            rules: {
                oldPassword: "required",
                newPassword: {
                    required: true,
                    isComplexity: true
                },
                newPasswords: {
                    required: true,
                    equalTo: "#newPassword"
                }
            },
            messages: {
                oldPassword: {
                    required: icon + "请输入您的旧密码"
                },
                newPassword: {
                    required: icon + "请输入您的密码",
                },
                newPasswords: {
                    required: icon + "请再次输入密码",
                    equalTo: icon + "两次输入的密码不一致"
                }
            }
        })
    });
    $.validator.setDefaults({
        submitHandler: function () {
            let id = $("#id").val();
            let oldPwd = $.md5($("#oldPassword").val())
            let newPwd = $.md5($("#newPassword").val())
            let editPwd_url =/*[[@{/sys/user/editPassword}]]*/''
            $.ajax({
                type: "post",
                url: editPwd_url,
                data: {
                    "oldPwd": oldPwd,
                    "newPwd": newPwd,
                    "id": id
                },
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        $("#myModal").modal('hide')
                        toastr.success(data.message)
                    } else {

                        toastr.error(data.message)
                    }
                },
                error: function (data) {
                    toastr.error("系统异常")
                    $("#myModal").modal('hide')
                }
            });
        }
    });
</script>
</body>

</html>
